/**
 * Copyright (c) 快宝网络 kuaidihelp.com Co., Ltd. All Rights Reserved 禁止外泄以及用于其它的商业用途
 */

import React from 'react';
import { Col, FormInstance, Row } from 'antd';
import { Form } from 'antd';
import { ProFormText, ProFormDigit } from '@ant-design/pro-form';
import { patterns } from '@/utils/patterns';
import { useDebounceFn } from 'ahooks';

interface MoneyStatus {
  total_amount: number;
  status: number;
}

interface AddContentProps {
  form: FormInstance;
  status: MoneyStatus;
  checkStatus: (mobile: string) => void;
}

/**
 * 添加
 *  */
const AddContent: React.FC<AddContentProps> = ({ form, checkStatus, status }) => {
  const { run: onValuesChange } = useDebounceFn(
    (value: any) => {
      const { phone } = value;
      if (Object.keys(value).includes('phone')) {
        checkStatus(phone);
      }
    },
    {
      wait: 300,
      leading: false,
      trailing: true,
    },
  );

  return (
    <Form form={form} onValuesChange={onValuesChange}>
      <Row>
        <Col span={16}>
          <ProFormText
            label='驿站账号'
            name='phone'
            placeholder='请输入驿站手机号'
            rules={[
              {
                required: true,
                message: '请输入手机号！',
              },
              patterns.mobile,
            ]}
          />
        </Col>
        <Col span={8} style={{ lineHeight: '33px' }}>
          <div style={{ color: 'red', margin: '0px 5px 0px 10px' }}>{`${
            status.status == 1 ? '已禁用' : ''
          }`}</div>
        </Col>
      </Row>
      <Row>
        <Col span={16}>
          <ProFormDigit
            label='新增返现金额'
            name='money'
            placeholder='请输入返现金额'
            fieldProps={{ precision: 2 }}
            rules={[
              {
                required: true,
                message: '请输入返现金额',
              },
            ]}
          />
        </Col>
        <Col span={8} style={{ lineHeight: '33px' }}>
          <div style={{ color: 'red', margin: '0px 5px 0px 10px' }}>
            {status.total_amount > 0 ? `现有 ${status.total_amount} 元` : ''}
          </div>
        </Col>
      </Row>
    </Form>
  );
};

export default AddContent;
